<template>
  <div class="login-page">
    <div class="box-card">
      <div class="left">
        <div class="logo">
          <img src="@/assets/title.ef005a7a.png" alt="" />
        </div>
        <el-form
          :model="formInline"
          class="demo-form-inline"
          style="width: 398px"
        >
          <el-form-item>
            <el-input v-model="formInline.user" placeholder="请输入内容">
              <template slot="prepend"><i class="el-icon-mobile"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item>

              <el-input placeholder="请输入密码" v-model="formInline.password" show-password>
              <template slot="prepend"><i class="el-icon-lock"></i></template>
            </el-input>
          </el-form-item>
        </el-form>
        <div><el-checkbox v-model="checked">记住密码</el-checkbox></div>
        <button @click="$router.push('/layout')">立即登录</button>
      </div>
      <div class="right">
        <img
          src="http://www-wms-java.itheima.net/img/contentBg.1321d126.png"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formInline: ['user', 'password'],
      checked: false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.login-page {
  min-height: 100vh;
  // background-color: RED;
  position: relative;
  .box-card {
    width: 958px;
    height: 516px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 20px rgb(93 93 93 / 33%);
    // background-color: green;
    border-radius: 40px;

    .left {
      float: left;
      width: 398px;
      height: 516px;
      background: #fff;
      border-radius: 34px 0 0 34px;
      margin: 0 auto;
      .logo {
        margin-left: 124px;
        margin-top: 72px;
        img {
          width: 150px;
          height: 64px;
        }
      }
      .el-form {
        margin-top: 50px;
        margin-left:60px ;
        width: 100%;
      }
       .el-input__inner {
        width: 230px;
        height:50px;
      }
      .el-input-group__prepend{
        font-size: 24px;
      }
      .el-checkbox{
        margin-left: 60px;
      }
      button{
        width: 280px;
    height: 50px;
    background: #ffb200;
    border-radius: 8px;
    box-shadow: 0 2px 9px 1px rgb(255 178 0 / 47%);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: #332929;
    line-height: 22px;
    border: none;
    margin-left: 62px;
    margin-top:50px;
      }
    }
    .right {
      float: right;
      // background-image: url(http://www-wms-java.itheima.net/img/contentBg.1321d126.png);
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      width: 560px;
      height: 516px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
